<template>
  <div
    class="wrapper"
    :style="{width:wrapperWidth,height:wrapperHeight}"
  >
    <!-- 动态组建 -->
    <component
      v-for="(widget,index) in widgetList"
      :key='index'
      :height="widget.weight"
      :adlist="getAdListByName(widget.name)"
      v-bind:is="getComponent(widget.id)"
    ></component>
  </div>
</template>

<script>
import { getPageConfigs } from './api/api.js'
import PageHeader from './component/PageHeader'
import PageBottom from './component/PageBottom'
import PicAndVideo from './component/PicAndVideo'
import { PAGE_HEADER, PAGE_BOTTOM, PIC_AND_VIDEO } from '../model/ComponentType.js'
import { getAdIDs, getAdList } from './utils/ParseUtils.js'
export default {
  components: {
    'page-header': PageHeader,
    'page-bottom': PageBottom,
    'pic-and-video': PicAndVideo
  },
  name: 'App',
  mounted() {
    this._getPageConfigs()
  },
  data() {
    return {
      wrapperWidth: 0,
      wrapperHeight: 0,
      widgetList: [],
      projectMemo: [],
      adList: []
    }
  },
  methods: {
    _getPageConfigs: async function () {
      try {
        let res = await getPageConfigs('jkj_hujian_test', '355380')
        // 解析页面的高度和宽度
        this.wrapperWidth = res.DPI_ROW + 'px'
        this.wrapperHeight = res.DPI_COL + 'px'
        // 页面组件列表
        this.widgetList = res.MEMO.widgets
        this.projectMemo = res.PROJECT_MEMO
        this.adList = res.AD_LIST
      } catch (err) { }
    },
    // 根据返回的id类型，构建不同的组建
    getComponent(id) {
      let componentName
      switch (id) {
        case PAGE_HEADER:
          componentName = 'page-header'
          break
        case PAGE_BOTTOM:
          componentName = 'page-bottom'
          break
        case PIC_AND_VIDEO:
          componentName = 'pic-and-video'
          break
        default:
          break
      }
      return componentName
    },
    getAdListByName(name) {
      return getAdList(getAdIDs(name, this.projectMemo), this.adList)
    }
  }
}
</script>

<style>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  background: #fff;
}
.wrapper {
  margin: 0 auto;
}
</style>
